
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import store from '@/.storybook/store';
import eventList from '../../../pages/eventsList.vue';

<Meta
  title="Pages/Events List"
  component={eventList}
  argTypes={{
    noResults: { name:'No results', control: { type: 'boolean' } },
    filtersAreOpen: { name:'Show filters', control: { type: 'boolean' } },
    displayType:    { control: { type: 'select', options: ['list', 'grid'] } },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { eventList },
  store: store,
  template: '<eventList :noResults="noResults" :isLoading="isLoading" :filtersAreOpen="filtersAreOpen" :displayType="displayType" />',
});

# Events List

<a href="?path=/story/pages-events-list--with-results">Go to the Canvas Tab</a>

---

<a href="?id=pages-events-list--with-results&args=&viewMode=story" target="_blank">Open page in full width in a new tab</a>


<Canvas>
  <Story
    name="With results"
    args={{
      noResults: false,
      isLoading: false,
      filtersAreOpen: false,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

# Show filters

<Canvas>
  <Story
    name="Without results"
    args={{
      noResults: false,
      isLoading: false,
      filtersAreOpen: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>



# Loading example

<Canvas>
  <Story
    name="When Loading"
    args={{
      noResults: true,
      isLoading: true
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>


